<!doctype html>
<html>
<head>
  <title>polymer</title>
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">
</head>
<body>
  
<x-outer></x-outer>

<dom-module id="x-outer">
  <template>
    <!-- <template is="dom-repeat" items="{{items}}"><div item>{{item}}</div></template> -->
    <x-inner><div item>A</div><div item>B</div><div item>C</div></x-inner>
  </template>
</dom-module>
 
<dom-module id="x-inner">
  <style>
    .one, .two {
      display: block;
      border: 2px solid orange;
      margin: 10px;
      padding: 10px;
    }

    .two {
      border-color: green;
    }
  </style>
  <template>
    <x-inner-most class="one"><content class="item" select="[item]"></content></x-inner-most>
    
    <x-inner-most class="two"><content class="notItem" select=":not([item])"></content></x-inner-most>  
  </template>
</dom-module>
  
<dom-module id="x-inner-most">
  <template>
    <div style="background-color: green;">
      <content class="test" select="[test]"></content>
    </div>
    <div style="background-color: red;">
      <content class="notTest" select=":not([test])"></content>
    </div>
    <br>
    <button on-click="_onTest1a">[test]:not[item]</button>
    <button on-click="_onTest2a">:not[test][item]</button>
    <button on-click="_onTest1b">auto: [test]:not[item]</button>
    <button on-click="_onTest2b">auto: :not[test][item]</button>
  </template>
</dom-module>
  
<script>
(function() {
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-outer',
      properties: {
        items: {
          type: Array,
          value: ["A", "B", "C"]
        }
      }
    });
    
    Polymer({
      is: 'x-inner'
    });

    var element;
    
    Polymer({
      is: 'x-inner-most',

      _onTest1a: function() {
        this.doTest(function(e) {
          e.setAttribute('test', '');
          e.removeAttribute('item');
          this.distributeContent();
        });
      },

      _onTest1b: function() {
        this.doTest(function(e) {
          Polymer.dom(e).setAttribute('test', '');
          Polymer.dom(e).removeAttribute('item');
        });
      },

      _onTest2a: function() {
        this.doTest(function(e) {
          e.setAttribute('item', '');
          e.removeAttribute('test');
          this.distributeContent();
        });
      },

      _onTest2b: function() {
        this.doTest(function(e) {
          Polymer.dom(e).setAttribute('item', '');
          Polymer.dom(e).removeAttribute('test');
        });
      },

      doTest: function(work) {
        element = element || document.querySelector("[item]");
        console.group('test');
        console.log('before', Polymer.dom(element).getDestinationInsertionPoints());
        //
        work.call(this, element);
        Polymer.dom.flush();
        // 
        console.log('after', Polymer.dom(element).getDestinationInsertionPoints());
        console.groupEnd('test');
      }
    });
  });

})();
</script>
  
</body>
</html>
